<%@ page import="com.h.heal.entity.Admin" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HEAL文章管理</title>
    <jsp:include page="../../common_css.jsp"/>
    <style>

        input {
            border-radius: 20px;
            border: none;
            background: rgba(58, 58, 58, 0.20);
            text-align: center;
        }

        table {
            table-layout: fixed;
        }


        td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        input {
            border-radius: 20px;
            border: none;
            background: rgba(58, 58, 58, 0.20);
            text-align: center;
        }

        .echarts {
            height: 350px;
            width: 100%;
        }
    </style>
</head>
<body style="background: linear-gradient(to top right, #a1ffce 0%, #faffd1 100%);">
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <jsp:include page="../../top.jsp"/>

    <!-- partial -->

    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <jsp:include page="../../left.jsp"/>
        <!-- partial -->
        <div style="display: table;width: inherit">
            <div class="row">
                <div class="col-md-12 stretch-card" style="background: rgba(255,255,255,0);
    border: none;">
                    <div class="card">
                        <div class="card-body">
                            <span class="card-title" style="font-size: 1.875rem;margin-right: 50px">文章列表</span>
                            <div id="main" class="echarts">main</div>
                            <%--                            <input type="button" value="添加" onclick="window.location.href='/jsp/product/add.jsp'">--%>
                            <%--                            好康的添加图标--%>
                            <div style="text-align: right">
                                <a class="mdi mdi-plus" href="../../../jsp/admin/topic/add.jsp"
                                   style="font-size: 1.5rem ;margin-right: 50px">添加文章</a>
                            </div>
                            <div class="table-responsive">
                                &nbsp;&nbsp;&nbsp;文章名称：<input type="text" id="topic_title"
                                                                  value="${pageInfo.search1}">
                                &nbsp;&nbsp;&nbsp;作者id：<input type="text" id="topic_uid"
                                                                value="${pageInfo.search2}">
                                &nbsp;&nbsp;&nbsp;<input type="button" onclick="doSearch(1)" value="查询">
                                <%--                                &nbsp;&nbsp;&nbsp;<input type="button" onclick="doSearch()" value="查询">--%>

                                <table id="recent-purchases-listing" class="table">
                                    <thead>
                                    <tr>
                                        <th>小作文</th>
                                        <th>文章标题</th>
                                        <th>作者</th>
                                        <th>上传时间</th>
                                        <th>正文预览</th>
                                        <%--                                        <th>播放量</th>--%>
                                        <th>点赞数</th>
                                        <%--                                        <th>url</th>--%>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="item" items="${pageInfo.list}">
                                        <tr>
                                            <td>${item.topic_tid}</td>
                                            <td>${item.topic_title}</td>
                                            <td>${item.topic_uid}</td>
                                            <td>${item.topic_timestamp}</td>
                                            <td>${item.topic_maintext}</td>

                                            <td>${item.topic_like}</td>

                                            <td>
                                                <a href="/topic/openEdit/${item.topic_tid}"
                                                   class="mdi mdi-pencil">编辑</a>
                                                <a href="#" class="mdi mdi-close"
                                                   onclick="if (confirm('确认要删除选中的记录吗？')){window.location.href='/topic/delete/${item.topic_tid}'}">删除</a>

                                            </td>
                                        </tr>
                                    </c:forEach>


                                    </tbody>
                                </table>
                                <jsp:include page="../../page.jsp"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->
    <%--        <footer class="footer">--%>
    <%--            <div class="d-sm-flex justify-content-center justify-content-sm-between">--%>
    <%--                <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>--%>
    <%--                <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a--%>
    <%--                        href="https://www.bootstrapdash.com/" target="_blank">Bootstrap dashboard template</a> from Bootstrapdash.com</span>--%>
    <%--            </div>--%>
    <%--        </footer>--%>
    <!-- partial -->
    <jsp:include page="../../footer.jsp"/>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<jsp:include page="../../common_js.jsp"/>
</body>

</html>
<script>
    function doSearch(pageNum) {
        var topic_title = $("#topic_title").val();
        var topic_uid = $("#topic_uid").val();
        window.location.href = "/topic/main?pageNum=" + pageNum + "&topic_title=" + topic_title + "&topic_uid=" + topic_uid;

    }
</script>


<%--echarts--%>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>

<script type="text/javascript">
    var app = {};

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;


    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                // ['item', '点赞'],
                <c:forEach var="item" items="${pageInfo.list}">
                ["${item.topic_title}", ${item.topic_like}],
                </c:forEach>

                // ['Matcha Latte', 43.3, 85.8, 93.7],
                // ['Milk Tea', 83.1, 73.4, 55.1],
                // ['Cheese Cocoa', 86.4, 65.2, 82.5],
                // ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 30,
                formatter: function (value) {
                    var res = value;
                    // 长度超过4个的以省略号显示
                    if (res.length > 5) {
                        res = res.substring(0, 4) + "..";
                    }
                    return res;
                }
            }
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{type: 'bar',
            name:"点赞数",
            itemStyle: {    //柱状颜色和圆角
                color: '#74b720',
                barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
            },}],
        dataZoom: {
            show: true, // 为true 滚动条出现
            realtime: true,
            type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            height: 20, // 表示滚动条的高度，也就是粗细
            start: 20, // 表示默认展示20%～80%这一段。
            end: 80
        }
    };

    option && myChart.setOption(option);

</script>
